<template>
	<view class="product-container page-container">
		<!-- 搜索和筛选栏 -->
		<view class="search-filter-bar">
			<view class="search-box">
				<input type="text" placeholder="搜索商品名称" v-model="searchKeyword" @input="onSearch"
					class="search-input" />
			</view>
			<view class="filter-btn" @click="showFilterPopup = true">
				<text class="filter-text">筛选</text>
			</view>
		</view>

		<!-- 统计卡片 -->
		<view class="stats-card">
			<view class="stat-item" @click="settingFilter('status', '0')">
				<text class="stat-number">{{ stats.totalProducts }}</text>
				<text class="stat-label">商品总数</text>
			</view>
			<view class="stat-item" @click="settingFilter('status', '1')">
				<text class="stat-number">{{ stats.onSaleProducts }}</text>
				<text class="stat-label">在售商品</text>
			</view>
			<view class="stat-item" @click="settingFilter('stock', '2')">
				<text class="stat-number">{{ stats.lowStockProducts }}</text>
				<text class="stat-label">库存预警</text>
			</view>
			<view class="stat-item" @click="settingFilter('status', '2')">
				<text class="stat-number">{{ stats.offSaleProducts }}</text>
				<text class="stat-label">已下架</text>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="product-list">
			<view class="product-item" v-for="(product, index) in products" :key="product.id"
				@click="toProductDetail(product)">
				<view class="product-info">
					<image :src="$tools.buildUrl(product.white_back_ground_pic_url)" mode="aspectFill"
						class="product-image"></image>
					<view class="product-details">
						<view class="product-header">
							<text class="product-name">{{ product.spu_name }}</text>
							<view class="product-status" :class="product.sku_status===1?'on':'off'">
								<text class="status-text">{{ getStatusText(product.sku_status) }}</text>
							</view>
						</view>
						<text class="product-spec">{{ product.sku_name }}</text>
						<view class="product-price-row">
							<view class="price-info">
								<text class="price-label">售价：</text>
								<text class="price-value">¥{{ product.price_min }}</text>
							</view>
							<view class="stock-sales-info">
								<view class="stock-info">
									<text class="stock-label">库存：</text>
									<text class="stock-value"
										:class="{ 'low-stock': product.available_stock <= product.stock_warning }">{{ product.available_stock }}</text>
								</view>
								<view class="sales-info">
									<text class="sales-label">销量：</text>
									<text class="sales-value">{{ product.total_salenum }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="product-actions">
					<view class="action-btn" @click.stop="toggleStatus(product)">
						<text class="action-text">{{ product.sku_status === 1 ? '下架' : '上架' }}</text>
					</view>
					<!-- <view class="action-btn" @click.stop="editProduct(product)">
						<text class="action-text">编辑</text>
					</view> -->
					<view class="action-btn" @click.stop="manageStock(product)">
						<text class="action-text">库存</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 筛选弹窗 -->
		<u-popup :show="showFilterPopup" @close="closeFilterPopup" mode="bottom" :round="20"
			:safe-area-inset-bottom="true">
			<view class="filter-popup">
				<view class="popup-header">
					<text class="popup-title">筛选条件</text>
					<text class="popup-close" @click="closeFilterPopup">✕</text>
				</view>

				<view class="filter-section">
					<text class="filter-title">商品分类</text>
					<view class="filter-options">
						<view class="filter-option" v-for="(option, index) in categoryOptions" :key="index"
							:class="{ active: currentFilter.category === option.id }"
							@click="selectFilter('category', option.id)">
							<text class="option-text">{{ option.group_name }}</text>
						</view>
					</view>
				</view>

				<view class="filter-section">
					<text class="filter-title">商品状态</text>
					<view class="filter-options">
						<view class="filter-option" v-for="(option, index) in statusOptions" :key="index"
							:class="{ active: currentFilter.status === option.value }"
							@click="selectFilter('status', option.value)">
							<text class="option-text">{{ option.label }}</text>
						</view>
					</view>
				</view>

				<view class="filter-section">
					<text class="filter-title">库存状态</text>
					<view class="filter-options">
						<view class="filter-option" v-for="(option, index) in stockOptions" :key="index"
							:class="{ active: currentFilter.stock === option.value }"
							@click="selectFilter('stock', option.value)">
							<text class="option-text">{{ option.label }}</text>
						</view>
					</view>
				</view>

				<view class="filter-section">
					<text class="filter-title">排序方式</text>
					<view class="filter-options">
						<view class="filter-option" v-for="(option, index) in sortOptions" :key="index"
							:class="{ active: currentFilter.sort === option.value }"
							@click="selectFilter('sort', option.value)">
							<text class="option-text">{{ option.label }}</text>
						</view>
					</view>
				</view>

				<view class="filter-actions">
					<button class="reset-btn" @click="resetFilter">重置</button>
					<button class="confirm-btn" @click="applyFilter">确定</button>
				</view>
			</view>
		</u-popup>

		<!-- 库存编辑弹窗 -->
		<u-popup :show="showStockPopup" @close="closeStockPopup" mode="center" :round="20">
			<view class="stock-popup">
				<view class="popup-header">
					<text class="popup-title">编辑库存</text>
					<text class="popup-close" @click="closeStockPopup">✕</text>
				</view>

				<view class="stock-content">
					<view class="product-info-mini">
						<image :src="$tools.buildUrl(currentProduct.white_back_ground_pic_url)" mode="aspectFill"
							class="mini-image"></image>
						<view class="mini-details">
							<text class="mini-name">{{ currentProduct.spu_name }}</text>
							<text class="mini-spec">{{ currentProduct.sku_name }}</text>
						</view>
					</view>

					<view class="stock-form">
						<view class="form-item">
							<text class="form-label">当前库存</text>
							<text class="current-stock">{{ currentProduct.available_stock }}</text>
						</view>

						<view class="form-item">
							<text class="form-label">调整方式</text>
							<view class="adjust-type">
								<view class="type-option" :class="{ active: stockAdjustType === 'add' }"
									@click="stockAdjustType = 'add'">
									<text class="type-text">增加</text>
								</view>
								<view class="type-option" :class="{ active: stockAdjustType === 'reduce' }"
									@click="stockAdjustType = 'reduce'">
									<text class="type-text">减少</text>
								</view>
								<view class="type-option" :class="{ active: stockAdjustType === 'set' }"
									@click="stockAdjustType = 'set'">
									<text class="type-text">设置</text>
								</view>
							</view>
						</view>

						<view class="form-item">
							<text class="form-label">{{ getAdjustLabel() }}</text>
							<view class="input-wrapper">
								<input type="number" v-model="stockAdjustValue" :placeholder="getAdjustPlaceholder()"
									class="stock-input" />
							</view>
						</view>

						<view class="form-item" v-if="stockAdjustType !== 'set'">
							<text class="form-label">调整后库存</text>
							<text class="result-stock" :class="{ 'error': getResultStock() < 0 }">
								{{ getResultStock() }}
							</text>
						</view>

					</view>
				</view>
			</view>

			<view class="stock-actions">
				<button class="cancel-btn" @click="closeStockPopup">取消</button>
				<button class="confirm-btn" @click="confirmStockAdjust">确定</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKeyword: '',
				hasSearched: false,
				recordCount: 0,
				page: 1,
				limit: 10,
				products: [], // 商品列表
				showFilterPopup: false,
				showStockPopup: false,
				// 库存编辑相关
				currentProduct: {},
				stockAdjustType: 'add', // add, reduce, set
				stockAdjustValue: '',
				stockRemark: '',
				// 统计数据
				stats: {
					totalProducts: 0,
					onSaleProducts: 0,
					lowStockProducts: 0,
					offSaleProducts: 0
				},
				// 筛选条件
				currentFilter: {
					category: '0',
					status: '0',
					stock: '0',
					sort: 'stock'
				},
				// 筛选选项
				categoryOptions: [{
					group_name: '全部分类',
					id: '0'
				}],
				statusOptions: [{
						label: '全部',
						value: '0'
					},
					{
						label: '在售',
						value: '1'
					},
					{
						label: '已下架',
						value: '2'
					}
				],
				stockOptions: [{
						label: '全部',
						value: '0'
					},
					{
						label: '库存充足',
						value: '1'
					},
					{
						label: '库存预警',
						value: '2'
					},
					{
						label: '缺货',
						value: '3'
					}
				],
				sortOptions: [{
						label: '按库存排序',
						value: 'stock'
					},
					{
						label: '按价格排序',
						value: 'price'
					},
					{
						label: '按名称排序',
						value: 'name'
					},
					{
						label: '按销量排序',
						value: 'sales'
					}
				],

			}
		},

		onLoad(options) {
			if (options.q) {
				this.searchKeyword = decodeURIComponent(options.q)
			}
			this.onSearch()
			this.loadCategory()
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			if (!this.hasSearched) {
				this.page = 1
				this.recordCount = 0
				this.products = []
				this.loadDataList()
			}
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			// 下拉触底，先判断是否有请求正在进行中
			// 以及检查当前请求页数是不是小于数据总页数，如符合条件，则发送请求
			const page = this.page
			const limit = this.limit
			const recordCount = this.recordCount
			if (!this.hasSearched && page * limit < recordCount) {
				this.page++
				setTimeout(() => {
					this.loadDataList()
				}, 500)
			}
		},
		methods: {
			onSearch() {
				this.page = 1
				this.recordCount = 0
				this.products = []
				this.loadDataList()
				this.loadDataState()
			},
			loadDataList() {
				if (this.hasSearched) {
					return false
				}
				this.hasSearched = true
				this.$api.agent.GetAgentProductList({
					page: this.page,
					limit: this.limit,
					keyword: this.searchKeyword,
					group_id: this.currentFilter.category,
					good_status: this.currentFilter.status,
					stock_status: this.currentFilter.stock,
					orderby: this.currentFilter.sort,
				}).then(res => {
					this.hasSearched = false
					this.recordCount = res.count
					this.products = this.products.concat(res.data)
				}).catch(err => {
					this.hasSearched = false
					if (this.page > 0) {
						this.page--
					}
				})
			},

			loadDataState() {
				this.$api.agent.GetAgentProductTJ().then(res => {
					this.stats = res.data
				})
			},

			loadCategory() {
				this.$api.agent.GetProductGroupAll().then(res => {
					this.categoryOptions = [{
						group_name: '全部分类',
						id: '0'
					}, ...res.data]
				})
			},

			// 获取状态文本
			getStatusText(status) {
				return status === 1 ? '在售' : status === 2 ? '已下架' : '待上架'
			},

			// 切换商品状态
			toggleStatus(product) {
				if (product.available_stock === 0 && product.sku_status === 2) {
					uni.showToast({
						title: '缺货商品无法上架',
						icon: 'none'
					})
					return
				}

				const new_status = product.sku_status === 1 ? 2 : 1

				this.$api.agent.SettingProduct({
					id: product.id,
					status: new_status
				}).then(res => {
					product.sku_status = new_status
					this.loadDataState()
					uni.showToast({
						title: res.msg,
						icon: 'success'
					})
				})
			},

			// 编辑商品
			editProduct(product) {
				uni.navigateTo({
					url: `/dealer-package/product/edit?id=${product.id}`
				})
			},

			// 管理库存
			manageStock(product) {
				this.currentProduct = {
					...product
				}
				this.stockAdjustType = 'add'
				this.stockAdjustValue = ''
				this.stockRemark = ''
				this.showStockPopup = true
			},

			// 跳转到商品详情
			toProductDetail(product) {
				uni.navigateTo({
					url: `/pages/product/detail?id=${product.id}`
				})
			},

			// 选择筛选条件
			selectFilter(type, value) {
				this.currentFilter[type] = value
			},

			// 重置筛选
			resetFilter() {
				this.currentFilter = {
					category: '0',
					status: '0',
					stock: '0',
					sort: 'stock'
				}
			},

			// 选择筛选条件
			settingFilter(type, value) {
				this.currentFilter = {
					category: '0',
					status: '0',
					stock: '0',
					sort: this.currentFilter.sort
				}
				this.currentFilter[type] = value
				this.onSearch()
			},

			// 关闭筛选弹窗
			closeFilterPopup() {
				this.showFilterPopup = false
			},

			// 应用筛选
			applyFilter() {
				this.closeFilterPopup()
				this.onSearch()
			},

			// 关闭库存弹窗
			closeStockPopup() {
				this.showStockPopup = false
				this.currentProduct = {}
				this.stockAdjustValue = ''
				this.stockRemark = ''
			},

			// 获取调整标签
			getAdjustLabel() {
				switch (this.stockAdjustType) {
					case 'add':
						return '增加数量'
					case 'reduce':
						return '减少数量'
					case 'set':
						return '设置库存'
					default:
						return '调整数量'
				}
			},

			// 获取输入提示
			getAdjustPlaceholder() {
				switch (this.stockAdjustType) {
					case 'add':
						return '请输入要增加的数量'
					case 'reduce':
						return '请输入要减少的数量'
					case 'set':
						return '请输入新的库存数量'
					default:
						return '请输入数量'
				}
			},

			// 计算调整后库存
			getResultStock() {
				const currentStock = this.currentProduct.available_stock || 0
				const adjustValue = parseInt(this.stockAdjustValue) || 0

				switch (this.stockAdjustType) {
					case 'add':
						return currentStock + adjustValue
					case 'reduce':
						return currentStock - adjustValue
					case 'set':
						return adjustValue
					default:
						return currentStock
				}
			},

			// 检查是否可以确认
			canConfirm() {
				if (!this.stockAdjustValue || this.stockAdjustValue === '') return false
				const adjustValue = parseInt(this.stockAdjustValue)
				if (isNaN(adjustValue) || adjustValue < 0) return false

				// 如果是减少操作，检查是否会导致负库存
				if (this.stockAdjustType === 'reduce') {
					return this.getResultStock() >= 0
				}

				return true
			},

			// 确认库存调整
			confirmStockAdjust() {
				if (!this.canConfirm()) {
					uni.showToast({
						title: '请输入有效的调整数量',
						icon: 'none'
					})
					return
				}

				const resultStock = this.getResultStock()
				if (resultStock < 0) {
					uni.showToast({
						title: '库存不能为负数',
						icon: 'none'
					})
					return
				}

				// 找到对应的商品并更新库存
				const productIndex = this.products.findIndex(p => p.id === this.currentProduct.id)
				if (productIndex !== -1) {
					let product = this.products[productIndex]
					product.stockAdjustType = this.stockAdjustType
					product.stockAdjustValue = this.stockAdjustValue
					product.resultStock = resultStock
					this.$api.agent.SaveProductStock(product).then(res => {
						product.available_stock = res.data ? res.data : resultStock
						this.loadDataState()
						// 如果库存为0，自动下架商品
						if (product.available_stock <= 0 && product.sku_status === 1) {
							uni.showToast({
								title: `库存调整成功，商品已自动下架`,
								icon: 'success'
							})
							this.toggleStatus(product)
						} else {
							uni.showToast({
								title: '库存调整成功',
								icon: 'success'
							})
						}
					})
				}

				this.closeStockPopup()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.product-container {
		background-color: #f8f9fa;
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	}

	/* 搜索筛选栏 */
	.search-filter-bar {
		display: flex;
		gap: 20rpx;
		margin-bottom: 20rpx;
	}

	.search-box {
		flex: 1;
		position: relative;
		background-color: white;
		border-radius: 50rpx;
		padding: 0 40rpx 0 20rpx;
		display: flex;
		align-items: center;
	}

	.search-input {
		flex: 1;
		height: 80rpx;
		font-size: 28rpx;
		color: #333;
	}

	.filter-btn {
		background-color: white;
		border-radius: 50rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.filter-text {
		font-size: 28rpx;
		color: #333;
	}

	/* 统计卡片 */
	.stats-card {
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.stat-item {
		text-align: center;
		flex: 1;
	}

	.stat-number {
		font-size: 36rpx;
		font-weight: 700;
		color: #52a58a;
		display: block;
		margin-bottom: 8rpx;
	}

	.stat-label {
		font-size: 24rpx;
		color: #666;
		display: block;
	}

	/* 快捷操作 */
	.quick-actions {
		display: flex;
		gap: 20rpx;
		margin-bottom: 20rpx;
	}

	.quick-action-btn {
		flex: 1;
		background-color: white;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.quick-action-text {
		font-size: 28rpx;
		color: #333;
	}

	/* 商品列表 */
	.product-list {
		display: flex;
		flex-direction: column;
	}

	.product-item {
		background-color: white;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.product-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 12rpx;
		flex-shrink: 0;
	}

	.product-info {
		display: flex;
		gap: 20rpx;
	}

	.product-details {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.product-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.product-name {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		flex: 1;
		margin-right: 10rpx;
	}

	.product-status {
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
		flex-shrink: 0;
	}

	.product-status.on {
		background-color: #e8f5e8;
		color: #52a58a;
	}

	.product-status.off {
		background-color: #ffeaa7;
		color: #d63031;
	}

	.status-text {
		font-size: 20rpx;
	}

	.product-spec {
		font-size: 24rpx;
		color: #666;
	}

	.product-price-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.price-info {
		display: flex;
		align-items: center;
		gap: 5rpx;
	}

	.stock-sales-info {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.stock-info,
	.sales-info {
		display: flex;
		align-items: center;
		gap: 5rpx;
	}

	.price-label,
	.stock-label,
	.sales-label {
		font-size: 24rpx;
		color: #666;
	}

	.price-value {
		font-size: 28rpx;
		font-weight: 600;
		color: #52a58a;
	}

	.stock-value,
	.sales-value {
		font-size: 24rpx;
		color: #333;
	}

	.stock-value.low-stock {
		color: #ff4757;
	}

	.sales-value {
		color: #52a58a;
	}

	.product-actions {
		display: flex;
		gap: 20rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #f0f0f0;
	}

	.action-btn {
		flex: 1;
		height: 60rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.action-text {
		font-size: 26rpx;
		color: #333;
	}

	/* 筛选弹窗 */
	.filter-popup {
		padding: 30rpx;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.popup-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.popup-close {
		font-size: 36rpx;
		color: #999;
	}

	.filter-section {
		margin-bottom: 40rpx;
	}

	.filter-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.filter-options {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
	}

	.filter-option {
		padding: 15rpx 30rpx;
		background-color: #f8f9fa;
		border-radius: 50rpx;
		border: 2rpx solid transparent;
	}

	.filter-option.active {
		background-color: #e8f5e8;
		border-color: #52a58a;
	}

	.option-text {
		font-size: 26rpx;
		color: #333;
	}

	.filter-option.active .option-text {
		color: #52a58a;
	}

	.filter-actions {
		display: flex;
		gap: 20rpx;
		margin-top: 40rpx;
	}

	.reset-btn,
	.confirm-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
		border: none;
	}

	.reset-btn {
		background-color: #f8f9fa;
		color: #666;
	}

	.confirm-btn {
		background-color: #52a58a;
		color: white;
	}

	/* 库存编辑弹窗 */
	.stock-popup {
		width: 600rpx;
		background-color: white;
		border-radius: 20rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.stock-popup .popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 30rpx 20rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.stock-popup .popup-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.stock-popup .popup-close {
		font-size: 36rpx;
		color: #999;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.stock-content {
		padding: 30rpx;
		flex: 1;
	}

	.product-info-mini {
		display: flex;
		align-items: center;
		gap: 20rpx;
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
	}

	.mini-image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 8rpx;
		flex-shrink: 0;
	}

	.mini-details {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.mini-name {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
	}

	.mini-spec {
		font-size: 24rpx;
		color: #666;
	}

	.stock-form {
		display: flex;
		flex-direction: column;
		gap: 25rpx;
	}

	.form-item {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.form-label {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
	}

	.current-stock {
		font-size: 32rpx;
		font-weight: 700;
		color: #52a58a;
	}

	.adjust-type {
		display: flex;
		gap: 15rpx;
	}

	.type-option {
		flex: 1;
		padding: 15rpx 20rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
		text-align: center;
		border: 2rpx solid transparent;
	}

	.type-option.active {
		background-color: #e8f5e8;
		border-color: #52a58a;
	}

	.type-text {
		font-size: 26rpx;
		color: #333;
	}

	.type-option.active .type-text {
		color: #52a58a;
		font-weight: 600;
	}

	.input-wrapper {
		position: relative;
	}

	.stock-input {
		height: 80rpx;
		padding: 0 20rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333;
		border: 2rpx solid transparent;
	}

	.stock-input:focus {
		border-color: #52a58a;
		background-color: white;
	}

	.result-stock {
		font-size: 32rpx;
		font-weight: 700;
		color: #52a58a;
	}

	.result-stock.error {
		color: #ff4757;
	}

	.stock-actions {
		display: flex;
		gap: 20rpx;
		padding: 30rpx;
		background-color: #f8f9fa;
		border-top: 1rpx solid #f0f0f0;
		border-radius: 0 0 20rpx 20rpx;
	}

	.cancel-btn,
	.confirm-btn {
		flex: 1;
		height: 80rpx;
		font-size: 28rpx;
		border: none;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cancel-btn {
		background-color: #f0f0f0;
		color: #666;
	}



	.confirm-btn {
		background-color: #52a58a;
		color: white;
		font-weight: 600;
	}

	.confirm-btn:active {
		background-color: #459a7e;
	}
</style>